<template>

    <div style="margin-left: 2%;margin-right: 2%">

<!--添加单位-->
<!--        <div style="margin-top: .8%;text-align: right">-->
<!--            <el-button size="mini" type="warning"  @click="centerDialogVisible = true">添加单位</el-button>-->
<!--        </div>-->
      <div style="margin-top: .8%;text-align: right">
        <el-button size="mini" @click="centerDialogVisible = true" type="primary">添加单位</el-button>
      </div>

        <div style="margin-top: 7px;margin-bottom: 10px">

            <el-table
                    :data="orgTable"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="orgName"
                        min-width="140px"
                        label="单位名称"
                >
                </el-table-column>
                <el-table-column
                        prop="orgProperty"
                        min-width="140px"
                        label="单位性质"
                >
                </el-table-column>
                <el-table-column
                        prop="custodianName"
                        min-width="140px"
                        label="管理人姓名"
                >
                </el-table-column>
              <el-table-column
                  prop="custodianJob"
                  min-width="140px"
                  label="管理人职务"
              >
              </el-table-column>
              <el-table-column
                  prop="purchaserName"
                  min-width="140px"
                  label="采购人姓名"
              >
              </el-table-column>
              <el-table-column
                  prop="purchaserJob"
                  min-width="140px"
                  label="采购人职务"
              >
              </el-table-column>
              <el-table-column
                  prop="tripleLargeLimit"
                  min-width="140px"
                  label="三重一大限额（万元）"
              >
              </el-table-column>
                <el-table-column
                        width="120px"
                        label="操作"
                >
                  <template slot-scope="{$index,row}">
<!--                    <el-button class="custom-button" type="primary" icon="el-icon-edit" @click="editLog = true"></el-button>-->
<!--                    <el-button class="custom-button" type="primary" icon="el-icon-delete" @click="delOrg(row)"></el-button>-->
                    <i title="修改"  style="color: #3980ae; margin-right: 20px;" class="el-icon-edit" @click="edit(row)"></i>
                    <i title="删除"  style="color: #e54e4e;" class="el-icon-delete-solid" @click="delOrg(row)"></i>
                  </template>

                </el-table-column>
            </el-table>

        </div>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

        <!--    添加单位模块     -->
        <el-dialog
                title="添加单位"
                :visible.sync="centerDialogVisible"
                width="45%"
                center>
            <el-form ref="addOrg" :rules="rules" :model="addOrg" label-width="140px">
                <el-form-item label="单位名称" prop="orgName" class="left-align">
                  <el-input  v-model="addOrg.orgName" placeholder="请输入单位名称">
                  </el-input>
                </el-form-item>
              <el-form-item label="单位拼音首字母" prop="spellingFirstChar" class="left-align">
                <el-input  v-model="addOrg.spellingFirstChar" placeholder="请输入单位拼音首字母">
                </el-input>
              </el-form-item>
                <el-form-item label="管理人姓名" prop="custodianName" class="left-align">
                  <el-input  v-model="addOrg.custodianName" placeholder="请输入管理人姓名">
                  </el-input>
                </el-form-item>
                <el-form-item  label="采购人姓名" prop="purchaserName" class="left-align">
                    <el-input  v-model="addOrg.purchaserName" placeholder="请输入采购人姓名">
                    </el-input>
                </el-form-item>
                <el-form-item  label="单位性质"  prop="orgProperty" class="left-align" >
                  <el-select   v-model="addOrg.orgProperty"  placeholder="请选择单位性质" >
<!--                    <el-option label="政府机关" value="1"></el-option>-->
<!--                    <el-option label="事业单位" value="2"></el-option>-->
<!--                    <el-option label="国营企业" value="3"></el-option>-->
<!--                    <el-option label="私营企业" value="3"></el-option>-->
                    <el-option
                        v-for="item in options"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="管理人职务" prop="custodianJob" class="left-align">
                    <el-input  v-model="addOrg.custodianJob"  placeholder="请输入管理人职务"></el-input>
                </el-form-item>
                <el-form-item label="采购人职务" prop="purchaserJob" class="left-align">
                    <el-input  v-model="addOrg.purchaserJob" placeholder="请输入采购人职务"></el-input>
                </el-form-item>
              <el-form-item label="三重一大限额" prop="tripleLargeLimit" class="left-align">
                <div style="display: flex; align-items: center;">
                  <el-input v-model="addOrg.tripleLargeLimit" style="width: 60px;"></el-input>
                  <span style="margin-left: 8px;">万元</span>
                </div>
              </el-form-item>
              <el-form-item label="采购限额："  class="left-align"> </el-form-item>
              <div style="display: flex; align-items: center;">
                <el-form-item label="货物:"  prop="cargo" style="margin-right: 8px;">
                  <el-input v-model="addOrg.cargo"   style="width: 60px;"></el-input>
                  <span style="margin-left: 8px;">万元</span>
                </el-form-item>
              </div>
              <div style="display: flex; align-items: center;">
                <el-form-item label="服务:" style="margin-right: 8px;" prop="service">
                  <el-input v-model="addOrg.service" style="width: 60px;"></el-input>
                  <span style="margin-left: 8px;">万元</span>
                </el-form-item>
              </div>
              <div style="display: flex; align-items: center;">
                <el-form-item label="工程:" style="margin-right: 8px;" prop="project">
                  <el-input v-model="addOrg.project"  style="width: 60px;"></el-input>
                  <span style="margin-left: 8px;">万元</span>
                </el-form-item>
              </div>

            </el-form>
            <div style="text-align: center">
                <el-button @click="cancelAddOrg">取 消</el-button>
                <el-button type="primary" @click="submitOrg">提 交</el-button>
            </div>
        </el-dialog>


      <!--    修改单位模块     -->
      <el-dialog
          title="修改单位"
          :visible.sync="editLog"
          width="45%"
          center>
        <el-form ref="editorg" :rules="rules" :model="editorg" label-width="140px">
          <el-form-item label="单位名称" prop="orgName" class="left-align">
            <el-input  v-model="editorg.orgName" placeholder="请输入单位名称">
            </el-input>
          </el-form-item>
          <el-form-item label="单位拼音首字母" prop="orgName" class="left-align">
            <el-input  v-model="editorg.spellingFirstChar" placeholder="请输入单位拼音首字母">
            </el-input>
          </el-form-item>
          <el-form-item label="管理人姓名" prop="custodianName" class="left-align">
            <el-input  v-model="editorg.custodianName" placeholder="请输入管理人姓名">
            </el-input>
          </el-form-item>
          <el-form-item  label="采购人姓名" prop="purchaserName" class="left-align">
            <el-input  v-model="editorg.purchaserName" placeholder="请输入采购人姓名">
            </el-input>
          </el-form-item>
          <el-form-item  label="单位性质"  prop="orgProperty" class="left-align" >
            <el-select   v-model="editorg.orgProperty"  placeholder="请选择单位性质" >
              <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
<!--              <el-option label="政府机关" value="1"></el-option>-->
<!--              <el-option label="事业单位" value="2"></el-option>-->
<!--              <el-option label="国营企业" value="3"></el-option>-->
<!--              <el-option label="私营企业" value="3"></el-option>-->
            </el-select>
          </el-form-item>
          <el-form-item label="管理人职务" prop="custodianJob" class="left-align">
            <el-input  v-model="editorg.custodianJob"  placeholder="请输入管理人职务"></el-input>
          </el-form-item>
          <el-form-item label="采购人职务" prop="purchaserJob" class="left-align">
            <el-input  v-model="editorg.purchaserJob" placeholder="请输入采购人职务"></el-input>
          </el-form-item>
          <el-form-item label="三重一大限额" prop="tripleLargeLimit" class="left-align">
            <div style="display: flex; align-items: center;">
              <el-input v-model="editorg.tripleLargeLimit" style="width: 60px;"></el-input>
              <span style="margin-left: 8px;">万元</span>
            </div>
          </el-form-item>
          <el-form-item label="采购限额："  class="left-align"> </el-form-item>
            <div style="display: flex; align-items: center;">
              <el-form-item label="货物:"  prop="cargo" style="margin-right: 8px;">
              <el-input v-model="editorg.cargo"   style="width: 60px;"></el-input>
              <span style="margin-left: 8px;">万元</span>
              </el-form-item>
            </div>
            <div style="display: flex; align-items: center;">
              <el-form-item label="服务:" style="margin-right: 8px;" prop="service">
              <el-input v-model="editorg.service" style="width: 60px;"></el-input>
              <span style="margin-left: 8px;">万元</span>
              </el-form-item>
            </div>
            <div style="display: flex; align-items: center;">
              <el-form-item label="工程:" style="margin-right: 8px;" prop="project">
              <el-input v-model="editorg.project"  style="width: 60px;"></el-input>
              <span style="margin-left: 8px;">万元</span>
              </el-form-item>
            </div>


        </el-form>
        <div style="text-align: center">
          <el-button @click="cancelEditOrg">取 消</el-button>
          <el-button type="primary" @click="editOrg">提 交</el-button>
        </div>
      </el-dialog>


    </div>
</template>

<script>
import {deleteOrg, getAllOrg, getOrgProperty, editOrg, addOrg} from "@/api/unit";
import pagination from '@/components/pagination/index.vue'
import user from "@/store/modules/user";
import {getAllUser, sysAddUSer} from "@/api/sysUser";

export default {
    name: 'index',
    data(){

        return {
            rules:{
                custodianName:[{required:true,message:'请输入管理人姓名',pattern: '[^ \x22]+',trigger: 'change'},{ min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }],
                spellingFirstChar: [{ required: true, message: '请输入单位拼音首字母', trigger: 'change' }, { pattern: /^[A-Z]{6}$/, message: '请输入六个大写英文字母', trigger: 'blur' }],
                orgName:[{required:true,message:'请输入单位名',pattern: '[^ \x22]+',trigger:'change'},{ min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }],
                orgProperty:[{required:true,message:'请选择单位性质',trigger: ['blur','change']}],
                custodianJob:[{required:true,message:'请输入管理人职业',pattern: '[^ \x22]+',trigger:'change'},{ min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }],
                purchaserName:[{required:true,message:'请输入采购人姓名',pattern: '[^ \x22]+',trigger:'change'},{ min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }],
                purchaserJob:[{required:true,message:'请输入采购人职业',pattern: '[^ \x22]+',trigger:'change'},{ min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }],
              tripleLargeLimit: [
                { required: true, message: '请输入三重一大限额', trigger: 'blur' },
              ],
              cargo: [
                { required: true, message: '请输入货物限额', trigger: 'blur' },
              ],
              service: [
                { required: true, message: '请输入服务限额', trigger: 'blur' },
              ],
              project: [
                { required: true, message: '请输入工程限额', trigger: 'blur' },
              ],
            },
            currentPage: 1,
            orgId:'',
            editLog:false,
            addOrg: {
                orgName: '',
                spellingFirstChar:'',
                orgProperty: '',
                custodianName: '',
                custodianJob: '',
                purchaserName:'',
                purchaserJob:'',
                tripleLargeLimit:'',
                cargo:'',
                service: '',
                project: ''
            },
          editorg: {
              orgId:'',
              orgName: '',
              spellingFirstChar:'',
              orgProperty: '',
              custodianName: '',
              custodianJob: '',
              purchaserName:'',
              purchaserJob:'',
              tripleLargeLimit:'',
              cargo:'',
              service: '',
              project: ''
          },
            theData:{
                page: 1,
                pageSize: 20,
            },
            options:[],
            centerDialogVisible: false,
            total: 0,
            loading:true,
            orgTable: [],
            pageSize: 20,
        }
    },
    mounted() {
        this.getAllOrg()
        this.getOrgProperty()
    },
    methods:{


      handleSizeChange(val) {
        this.theData.pageSize = val
        this.getAllOrg()

      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getAllOrg()
      },

      // 获得单位性质
      async getOrgProperty() {
        let res = await getOrgProperty()
        if (res.data.code === 200) {

          this.options = res.data.data
          // alert(res.data.data)
          // console.log("11111111111111111111"+this.options)

        } else {
          this.$message.error(res.data.msg);
        }
      },

      // 获得单位信息
      async getAllOrg() {
        this.loading = true
        let data = this.currentPage + '/' + this.theData.pageSize
        console.log(this.currentPage);
        console.log(this.theData.pageSize);
        let res = await getAllOrg(data)
        if (res) {
          this.loading = false
        }
        if (res.data.code === 200) {
          // console.log("222222222222222222222"+res.data.data.total)
          this.total = res.data.data.total
          this.orgTable = res.data.data.record
          console.log(this.orgTable)
        } else {
          this.$message({
            message: `${res.data.data.msg}`,
            type: 'warning'
          });
        }
      },

      // 弹出编辑窗口
      edit(row) {
        console.log("row====="+row.tripleLargeLimit)
          this.editorg = row;
          console.log("eeeeeeeeeeeee"+row.id)

          this.editLog = true
      },

      // 添加单位信息
      async submitOrg() {
        this.$refs.addOrg.validate(async (valid) => {
          if (valid) {

            let res = await addOrg(this.addOrg)
            if (res.data.code === 200) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.addOrg = {
                orgName: '',
                spellingFirstChar:'',
                orgProperty: '',
                custodianName: '',
                custodianJob: '',
                purchaserName:'',
                purchaserJob:'',
                tripleLargeLimit:'',
                cargo:'',
                service: '',
                project: ''
              }
              // 重置字段信息
              this.$refs["addOrg"].resetFields();
              // 获得个人的
              await this.getAllOrg()
              this.centerDialogVisible = false
            } else {
              this.$message.error(res.data.msg)
            }
          } else {
            this.$message.error('请确保信息完整！')
            return false;
          }
        })
      },
      // 修改单位信息
      async editOrg() {
        this.$refs.editorg.validate(async (valid) => {
          if (valid) {
            let res = await editOrg(this.editorg)
            if (res.data.code === 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              await this.getAllOrg()
              this.editLog = false
            } else {
              this.$message.error(res.data.msg)
            }
          } else {
            this.$message.error('请确保信息完整！')
            return false;
          }
        })
      },


        async getGetOrg(No,Value){
            this.loading=true
            if(No==1){
                this.theData.page=Value
            }else if(No==2){
                this.theData.pageSize=Value
                this.theData.page=1
            }
            let res = await getAllOrg(this.theData)
            if (res){
                this.loading=false
            }
            if(res.data.code===200){
                this.orgTable = res.data.data.list
                this.total=res.data.data.total
            }else {
                this.$message({
                    message: `${res.data.data.msg}`,
                    type:'warning'
                });
            }
        },

        cancelAddOrg(){
            this.$refs["addOrg"].resetFields();
            this.centerDialogVisible =false
            this.addOrg= {
              orgName: '',
              orgProperty: '',
              custodianName: '',
              custodianJob: '',
              purchaserName:'',
              purchaserJob:'',
              tripleLargeLimit:'',
              cargo:'',
              service: '',
              project: ''
            }
            this.$message({
                message: '已取消操作',
            });

        },
        cancelEditOrg(){
          // this.$refs["editorg"].resetFields();
          this.editLog =false
          this.$message({
           message: '已取消操作',
          });

        },
// 删除单位信息
        delOrg(row){
            this.$confirm('确认删除该单位信息吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res =await deleteOrg(row.orgId)
                if(res.data.code===200){
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    await this.getAllOrg()
                }else {
                    this.$message.error(res.data.msg)
                }
            });

        },

        open() {
            this.$confirm('此操作将永久删除选中的单位信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },


    }
}
</script>

<style scoped>

</style>
<style>
.el-tag + .el-tag {
    margin-left: 10px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
.custom-button {
  width: 20px; /* 设置按钮的宽度 */
  height: 36px; /* 设置按钮的高度 */
  /*margin-right: 10px; !* 设置按钮之间的间距 *!*/
}

</style>
